<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM</title>
    <style>
        *{padding:0;margin:0;font-family:"Microsoft YaHei",sans-serif}
        li{margin-left:30px;list-style-type:circle;display:inline;}
        li a{font-size:20px;text-decoration:none}
        img{margin-top:15px;}
    </style>
</head>
<body>
<!--<h1>What to buy?</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<p>Don't forget to buy this stuff.</p>
<ul id="purchases">
    <li>A tin of beans</li>
    <li class="sale">Cheese</li>
    <li class="sale important">Milk</li>
</ul>-->

<h1>Snapshots</h1>
<ul>
    <li><a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);return false">Fireworks</a></li>
    <li><a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffee</a></li>
    <li><a href="images/rose.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rose</a></li>
    <li><a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
</ul>

<img src="images/christmas.jpg" alt="christmas" title="Welcome to my shop!" id="placeholder">
<p id="description">choose an image</p>
<!--alt是在图片不显示的时候显示的文字-->
<script>
    //var paras=document.getElementsByTagName('p');
    /*for(var i=0;i<paras.length;i++){
        var title_content=paras[i].getAttribute('title');
        if(title_content){
            alert(title_content);
        }else{
            paras[i].setAttribute('title','s');
        }
    }*/

    /*for(var i=0;i<paras.length;i++){
        var title_content=paras[i].getAttribute('title');
        if(!title_content){
            paras[i].setAttribute('title','sss');
        }else{
            alert(title_content);
        }
    }*/

    /*var paras=document.getElementsByTagName('li');
    for(var i=0;i<paras.length;i++){
        var li_class=paras[i].getAttribute('class');
        if(li_class){
            alert(li_class);
        }else{
            paras[i].setAttribute('class','sss');
        }
    }*/
    /*var oLi=document.getElementsByTagName('a');
    for(var i=0;i<oLi.length;i++){
        alert(oLi[i].getAttribute('href'));
    }*/

    function showPic(whilepic){
        //1.实现点击列表项改变图片
        //1.1获取a标签中href属性值
        var url_pic=whilepic.getAttribute('href');
        //1.2改变类名为placeholder中src的属性值
        document.getElementById('placeholder').setAttribute('src',url_pic);
        //1.3改变类名为placeholder中的title属性值
        document.getElementById('placeholder').setAttribute('title',whilepic.getAttribute('title'));

        //2.实现点击列表项改变文本内容(文本内容为列表项title说明)
        //2.1 把列表项title属性值赋给一个变量
        var text=whilepic.getAttribute('title');
        //2.2 把类名为description的p元素节点对象赋给一个变量
        var descript=document.getElementById('description');
        //2.3把title属性值赋给p标签下的文本节点值
        descript.firstChild.nodeValue=text;
    }
</script>
</body>
</html>